<template>
  <body class="manage">
    <el-container style="height: 100%">
        <el-header class="header-div" style="height: 30px;text-align: left">
          <span style="font-size: 18px;font-weight: bold">TP慕课网管理系统</span>
        </el-header>
      <el-container style="margin-top: 30px" :class="{shou:showWid}">
        <el-aside width="auto" height="100%" style="" class="left_menu" >
          <el-menu
            :default-active="$route.fullPath"
            :collapse="showWid"
            :collapse-transition="false"
            :unique-opened="true"
            router
            background-color="#23282d"
            text-color="#CCC"
            class="left-div"
          >
            <el-menu-item
              index="/">
                <i class="el-icon-s-home"></i>
                <span slot="title">前台首页</span>
            </el-menu-item>
            <fragment v-for="menu in menuList" :key="menu.menu_id">
            <el-submenu v-if="menu.children" :index="menu.menu_id+''" :key="menu.menu_id">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.name}}</span>
              </template>
              <el-menu-item v-for="item in menu.children"
                            :index="item.url"
                            :key="item.menu_id" >
                {{item.name}}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else
                          :index="menu.url"
                          :key="menu.menu_id"
            >
              <i class="el-icon-caret-right"></i>
              <span slot="title">{{menu.name}}</span>
            </el-menu-item>
            </fragment>
            <el-menu-item @click="showWid=!showWid" >
              <i class="el-icon-caret-left" v-if="!showWid"></i>
              <i class="el-icon-caret-right" v-else></i>
              <span slot="title" v-if="!showWid">收起菜单</span>
              <span slot="title" v-else>打开菜单</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="show_div" style="text-align: left">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </body>
</template>

<script>
export default {
  name: 'ManageHome',
  components: {},
  data () {
    return {
      showWid: false,
      menuList: []
      // 赋值
      // menuList: [
      //   {
      //     menu_id: 1,
      //     name: '首页',
      //     url: '/index'
      //   },
      //   {
      //     menu_id: 2,
      //     name: '用户管理',
      //     icon: 'el-icon-user',
      //     url: '/manageHome/userManage',
      //     children: [
      //       {
      //         menu_id: 11,
      //         name: '用户列表',
      //         url: '/manageHome/userList'
      //       },
      //       {
      //         menu_id: 12,
      //         name: '用户分析',
      //         url: '/manageHome/userAnalysis'
      //       },
      //       {
      //         menu_id: 13,
      //         name: '角色管理',
      //         url: '/manageHome/roleManage'
      //       },
      //       {
      //         menu_id: 15,
      //         name: '认证管理',
      //         url: '/manageHome/userApprove'
      //       }
      //       // {
      //       //   menu_id: 16,
      //       //   name: '用户审核',
      //       //   url: '/index'
      //       // }
      //     ]
      //   },
      //   {
      //     menu_id: 3,
      //     name: '课程管理',
      //     icon: 'el-icon-notebook-1',
      //     url: '/manageHome/courseManage',
      //     children: [
      //       {
      //         menu_id: 31,
      //         name: '方向管理',
      //         url: '/manageHome/directionManage'
      //       },
      //       {
      //         menu_id: 32,
      //         name: '分类管理',
      //         url: '/manageHome/sortManage'
      //       },
      //       // {
      //       //   menu_id: 33,
      //       //   name: '课程分析',
      //       //   url: '/index'
      //       // },
      //       {
      //         menu_id: 34,
      //         name: '课程列表',
      //         url: '/manageHome/courseManage'
      //       },
      //       {
      //         menu_id: 35,
      //         name: '课程审核',
      //         url: '/manageHome/courseAudit'
      //       }// ,
      //       // {
      //       //   menu_id: 36,
      //       //   name: '优质课程',
      //       //   url: '/index'
      //       // }
      //     ]
      //   },
      //   // {
      //   //   menu_id: 4,
      //   //   name: '规则管理',
      //   //   icon: 'el-icon-unlock',
      //   //   url: '/manageHome/ruleManage',
      //   //   children: [
      //   //     {
      //   //       menu_id: 41,
      //   //       name: '社交管理',
      //   //       url: '/index'
      //   //     },
      //   //     {
      //   //       menu_id: 42,
      //   //       name: '第三方管理',
      //   //       url: '/index'
      //   //     }
      //   //   ]
      //   // },
      //   {
      //     menu_id: 5,
      //     name: '消息管理',
      //     icon: 'el-icon-message',
      //     url: '/manageHome/messageManage',
      //     children: [
      //       {
      //         menu_id: 51,
      //         name: '公告推送',
      //         url: '/manageHome/createAnnounce'
      //       },
      //       {
      //         menu_id: 52,
      //         name: '公告列表',
      //         url: '/manageHome/announceList'
      //       }// ,
      //       // {
      //       //   menu_id: 53,
      //       //   name: '消息分析',
      //       //   url: '/index'
      //       // }
      //     ]
      //   },
      //   {
      //     menu_id: 6,
      //     name: '网站管理',
      //     icon: 'el-icon-setting',
      //     url: '/manageHome/webManage',
      //     children: [
      //       {
      //         menu_id: 61,
      //         name: '基本信息',
      //         url: '/manageHome/baseInfo'
      //       },
      //       {
      //         menu_id: 62,
      //         name: '路径管理',
      //         url: '/manageHome/pathManage'
      //       }
      //     ]
      //   }
      // ]
    }
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    getMenuList () {
      var _this = this
      var userId = this.$store.state.user.userId
      this.$axios.post('/api/path/getMenuPath',
        this.$qs.stringify({
          userId: userId,
          type: 4
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.menuList = data.result
          }
        })
    }
  }
}
</script>

<style scoped>
body {
  margin: 0px;
  height: 100%;
}
.manage{
  background-color: #f1f1f1;
}
  .header-div{
    background-color: #23282d;
    color: #ccc;
    line-height: 30px;
    height: 30px;
    position: fixed;
    z-index: 9999;
    width: 100%;
  }
  .manage .left-div{
    text-align: left;
    background-color: #23282d;
  }
  .el-menu{
    border-right: 0px;
  }
  .manage .is-opened .el-submenu__title:after{
    right: 0;
    border: solid 8px transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #f1f1f1;
    top: 50%;
    margin-top: -8px;
  }
  .left-div:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .shou .show_div{
    margin-left: 60px;
  }
  .show_div{
    margin-left: 200px;
  }
  .manage .left_menu{
    position: fixed;
    height: 100%;
    background-color: #23282d;
  }
  .el-menu-item.is-active {
     color: #fff;
     background-color: #0073aa !important;

   }

.el-menu-item.is-active:after {

  right: 0;
  border: solid 8px transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #f1f1f1;
  top: 50%;
  margin-top: -8px;
}
</style>
